<template>
  <el-dialog :title="info.title" :visible.sync="phoneModal" width="30%" :show-close='false'>
    <div class="phoneModal">
      <div class="content">{{info.content}}</div>
      <div class="codeBlock">
        <img v-if="platform == 'weapp'" class="code" :src='locationHref + "/saas/get-mp-qr"' />
        <img v-else class="code" :src="'https://api.qrserver.com/v1/create-qr-code/?data=http://'+locationHref+'/pc&amp;size=100x100'" />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
import config from "~/config"

export default {
  name: "phoneModal",
  props: {
    info: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      locationHref: config.hostSaas,
      platform: localStorage.getItem('platform')
    };
  },
  computed: {
    ...mapState({
      phoneModal: state => state.phoneModal
    })
  },
  components: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroy() {},
  methods:{
    confirm(){
      this.$store.dispatch("changePhoneModal", false);
    }
  }
};
</script>

<style scoped lang="less">
.phoneModal {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .content {
    font-size: 16px;
  }
  .codeBlock {
    width: 70%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
    .code {
      width: 150px;
      height: 150px;
    }
  }
}
</style>
